<template>
  <div class="page-container">
    <div class="search">
      <div class="formBox">
        <el-form class="formClass" :label-width="$globalCss.formLabelWidth_default" label-position="top" ref="formSearch"
          :rules="rules" :model="formData" onsubmit="return false">
          <el-form-item :label="$t('label_operate_network')" prop="placeId">
            <ex_super_input v-model="formData.placeId" class="w_fill" type='select'
              url="/tms-api/base/TmsServiceOutletRpc/selectLikeServiceOutletLabel.json"
              :option="{ label: 'placeName', value: 'id' }" @initList="networkDefault" @change="placeChange" />
          </el-form-item>
          <el-form-item :label="$t('label_waybill_face')" prop="code">
            <div class="flex_row_center">
              <el-input v-model.trim="formData.code" clearable class="form_input_default" ref="codeInput"
                v-on:keyup.native="scanCodeKeyInput" @blur="blurCodeInput" style="flex: 1;" />
              <div>
                <el-button class="mg_l2" type="primary" @click="scanPackageNo"><i class="iconfont icon-scan" /> {{
                  $t('label_scan') }}</el-button>
                <el-checkbox class="mg_h2" style="margin-right: 0;" @change="autoFocusSetChange" v-model="autoFocusSet"
                  border>
                  {{ $t('label_auto_focus') }}
                </el-checkbox>
                <el-checkbox class="mg_h2" :value="autoPrint" border @change="changeAutoPrint">
                  {{ $t('label_auto_print') }}
                </el-checkbox>

              </div>
            </div>
          </el-form-item>
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item :label="$t('label_srm_api_request_order_no')">
                <el-input v-model="formData.trackNumber" disabled></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item :label="$t('label_customer_name')">
                <el-input v-model="formData.customerName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label_carrier')">
                <el-input v-model="formData.auCarrierName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label_transit_face')">
                <el-input v-model="formData.changeTrackNumberAfter" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
      </div>
      <div class="statistics">
        <div class="count">
          {{ formTable.tableData.length }}
        </div>
        <div class="title">{{ $t('label_scan_count') }}</div>
      </div>
    </div>

    <div class="layout-bottom">
      <div class="btns">
        <el-button type="primary" @click="onSubmit('/tms-api/waybill/TmsExpressOperationRpc/express_change_track.json')">
          {{ $t('label_submit') }}
        </el-button>
        <el-button @click="downloadXlsx('label_receive')">{{ $t('label_export') }}</el-button>
        <el-button @click="deleteFn">{{ $t('label_delete') }}</el-button>
      </div>
      <ex_super_table ref="MainTable" class="main-table" v-bind="tableOption" :data="formTable.tableData" :autoFlex="true"
        :autoPage="false" @selection-change="list => selection = list">
      </ex_super_table>
    </div>

    <print_express_change_order  @sureDefaultOption="autoPrint = true"
      :printClientParam="{ serverOutletId: formData.placeId }" ref="printRef" ></print_express_change_order>
  </div>
</template>
<script>
import print_express_change_order from '@/component/print/print_express_change_order'

import expressOperate from '@/mixin/tms-express-operate.js'

export default {
  title: "label_small_package_change_order",
  mixins: [expressOperate],
  components: {   print_express_change_order },
  data() {
    return {
      autoPrint: false,
      formData: {
        actionCode: 'ExpressWaybillChangeTrack'
      },
      // 扫码查询接口地址
      scanPackageNoUrl: "/tms-api/waybill/TmsExpressQueryRpc/scan_change_track.json",
      tableOption: {
        model: [
          { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
          // { key: 'trackNumber', label: 'label_waybill_code', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'changeTrackNumberBefore', label: 'label_transit_face_before', 'min-width': 160, 'show-overflow-tooltip': true, },
          { key: 'changeTrackNumberAfter', label: 'label_transit_face', 'min-width': 160, 'show-overflow-tooltip': true, },
          { key: 'customerName', label: 'label_customer_name', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'orderNo', label: 'label_dispatched_goods', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'orderNo', label: 'label_sku_only_code', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'auCarrierName', label: 'label_carrier', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'destinationPlaceName', label: 'label_next_station', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'transportType', label: 'label_logistics_methods', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum") },
          { key: 'currentUsername', label: 'label_operate_user', 'min-width': 120, 'show-overflow-tooltip': true },
          { key: 'scanTime', label: 'label_change_order_time', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$dateFormat(v) },
          {
            type: 'operate', width: 170, operate: [
              {
                label: "label_print",
                click: (row) => this.printFn(row)
              },
              {
                label: "label_remove", class: "button_text_danger",
                click: (row, i) => this.removeBox(i)
              },
            ]
          }
        ],

      }

    };
  },
  mounted() {
 
  },
  methods: {
    placeChange() {
      this.autoPrint = false
    },
   
    changeAutoPrint(e) {
      if (this.autoPrint == false) {
        if (!this.formData.placeId) {
          return this.$message.error(this.$t('label_please_select_branch'))
        }
        this.$refs.printRef.show([], { setDefaultOptionMode: true })
      } else {
        this.autoPrint = false
      }
    },
    autoPrintFn(row) {
      const printData = row || this.formData
      if (!_.isEmpty(printData)) {
        this.$refs.printRef.printDefaultOption({
          list:[printData]
        })
      }

    },
    // 打印
    printFn(row) {
      this.$refs.printRef.show([row], { setDefaultOptionMode: false })
    },

  }

};

</script>
<style lang="less" scoped >
.page-container {
  background-color: #F7F8FA;
  box-shadow: none;
  padding: 0;
}

.search {
  display: flex;
  justify-content: space-between;

  .formBox {
    background-color: #fff;
    flex: 1;
    border-radius: 4px;
    padding-top: 12px;

    .formClass {
      width: 800px;
      margin-left: 20px;
    }
  }


  .statistics {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    margin-left: 8px;
    border-radius: 4px;
    width: 30%;

    .count {
      font-size: 80px;
      color: #F56C6C;
    }
  }
}


.btns {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.layout-bottom {
  margin-top: 8px;
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
</style>

